import React from "react";
import { connect } from "dva";
// import ImgPlaceHold from "@components/ImgPlaceHold";
import { IMG_BASE, JUMP_URL } from "@constants";
import { px2rem, inIos, loadImgsFn,touchEventFn } from "@utils/tools";
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.scss';
import style from "./detail.less";


class App extends React.PureComponent {
  state = {
    caseChildIndex:1,
  };

  componentDidMount() {

  }


  gotoPage(index){
    console.log(index,"--1---")
  }

  changeChildIndex(index){
    this.setState({
      caseChildIndex:index
    })
  }

  render = () => {

  var {caseChildIndex} = this.state;
  var {caseIndex} = this.props;

  var text_title = "";

  switch (caseIndex) {
    case 1:
              switch (caseChildIndex) {
                case 1:
                  text_title = "注册手机银行"
                  break;
                case 2:
                  text_title = "绑定微信银行"
                  break;
                case 3:
                  text_title = "人脸/指纹登陆"
                  break;
                default:
                  break;
              }
      break;
      case 2:
              switch (caseChildIndex) {
                case 1:
                  text_title = "设定转账限额"
                  break;
                case 2:
                  text_title = "人民币转账"
                  break;
                case 3:
                  text_title = "汇丰环球转账"
                  break;
                case 4:
                  text_title = "余额/交易明细查询"
                  break;
                default:
                  break;
              }
      break;
      case 3:
              switch (caseChildIndex) {
                case 1:
                  text_title = "投资理财"
                  break;
                case 2:
                  text_title = "外汇服务"
                  break;
                case 3:
                  text_title = "开立定存"
                  break;
                default:
                  break;
              }
      break;
      case 4:
              switch (caseChildIndex) {
                case 1:
                  text_title = "汇丰汇友荟"
                  break;
                case 2:
                  text_title = "更新手机号码"
                  break;
                case 3:
                  text_title = "智能客服“小丰”"
                  break;
                case 4:
                  text_title = "在线激活睡眠/静止账户"
                  break;
                case 5:
                  text_title = "联系我们预约服务"
                    break;
                default:
                  break;
              }
      break;
  
    default:
      break;
  }

  console.log(caseIndex,"caseIndex")
    return (
          <div className="detail_page">
              <div className="d_head">
                <div className="goBackBtnBox" onClick={()=>{
                  this.props.goback()
                  if(window.nowSwiper){
                    window.nowSwiper.slideTo(0)
                  }
                  this.setState({
                      caseChildIndex:1
                  })
                }}>
                <img src={`${IMG_BASE}left-btn.png`} className="gobackBtn" alt="" />
                </div>
                <img src={`${IMG_BASE}case_${this.props.caseIndex}_headbg.png`} className="lbtn" alt="" />
                  <div className="d_title">{text_title}</div>
                
              </div>
              {caseIndex==1&&
              <Swiper
                spaceBetween={50}
                slidesPerView={1}
                navigation
                pagination={{ clickable: true }}
                scrollbar={{ draggable: true }}
                onSwiper={(swiper) => {
                  window.nowSwiper = swiper;
                }}
                onSlideChange={(swiper) => {
                    this.changeChildIndex(swiper.activeIndex+1)
                }}
              >
                <SwiperSlide>
                  <div className="over_d_box">
                    <div className="re_box">
                        <div className="d_con">
                              <div className="d_texts">
                                  <div className="d_text_item">
                                      <div className={`step_icon blue_bg_color${caseIndex}`}>STEP.1</div>
                                      <div className="step-text">进入汇丰中国手机银行注册页面3</div>
                                  </div>
                                  <div className="d_text_item">
                                      <div className={`step_icon blue_bg_color${caseIndex}`}>STEP.2</div>
                                      <div className="step-text">同意条款与条件。</div>
                                  </div>
                                  <div className="d_text_item">
                                      <div className={`step_icon blue_bg_color${caseIndex}`}>STEP.3</div>
                                      <div className="step-text">选择认证方式。只需电话银行服务号码或借记卡号码，即可快速注册，推荐电话银行服务号码方式认证。</div>
                                  </div>
                                  <div className="d_text_item">
                                      <div className={`step_icon blue_bg_color${caseIndex}`}>STEP.4</div>
                                      <div className="step-text">验证身份信息。若您使用电话银行号码方式认证，需要输入电话银行号码及密码。  </div>
                                  </div>
                                  <div className="d_text_item">
                                      <div className={`step_icon blue_bg_color${caseIndex}`}>STEP.5</div>
                                      <div className="step-text">设置登录信息。创建您的用户名与密码后即完成注册！ </div>
                                  </div>
                              </div>

                              <div className="phoneBox">
                                  <img src={`${IMG_BASE}iphoneBox.png`} className="phoneBoxBg" alt="" />
                                  <div className="phoneBoxCon">
                                    <img src={`${IMG_BASE}case${this.props.caseIndex}_1_1.png`} className="phoneBoxConBg" alt="" />
                                  </div>
                              </div>
                        </div>
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                <div className="over_d_box">
                    <div className="re_box">
                        <div className="d_con">
                              <div className="d_texts">
                                  <div className="d_text_item">
                                      <div className={`step_icon blue_bg_color${caseIndex}`}>STEP.1</div>
                                      <div className="step-text">在微信中搜索“汇丰中国客户服务”微信号并关注</div>
                                  </div>
                                  <div className="d_text_item">
                                      <div className={`step_icon blue_bg_color${caseIndex}`}>STEP.2</div>
                                      <div className="step-text">点击推送的“立即绑定”消息，或在对话框中输入关键词“微信绑定”，阅读并同意条款后，按提示输入个人以及银行卡信息</div>
                                  </div>
                                  <div className="d_text_item">
                                      <div className={`step_icon blue_bg_color${caseIndex}`}>STEP.3</div>
                                      <div className="step-text">输入短信验证码完成绑定，您还将收到“绑定成功”的微信确认消息</div>
                                  </div>
                              </div>

                              <div className="phoneBox">
                                  <img src={`${IMG_BASE}iphoneBox.png`} className="phoneBoxBg" alt="" />
                                  <div className="phoneBoxCon">
                                    <img src={`${IMG_BASE}case${this.props.caseIndex}_2_1.png`} className="phoneBoxConBg" alt="" />
                                  </div>
                              </div>
                        </div>
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div className="over_d_box">
                    <div className="re_box">
                        <div className="d_con">
                              <div className="d_texts">
                                  <div className="p_text">
                                  第一时间设置人脸登录/指纹登录，无需安全密码即可登录手机银行。
                                  </div>
                                  <div className="p_text">
                                  如果您使用的是带有人脸识别（Face ID）或指纹识别（Touch ID）功能的手机，可在登录手机银行时选择人脸/指纹登录。继续依据提示开启人脸/指纹登录功能，同意条款与条件。通过验证后，即设置成功。
                                  </div>
                              </div>

                              <div className="phoneBox">
                                  <img src={`${IMG_BASE}iphoneBox.png`} className="phoneBoxBg" alt="" />
                                  <div className="phoneBoxCon">
                                    <img src={`${IMG_BASE}case${this.props.caseIndex}_3_1.png`} className="phoneBoxConBg" alt="" />
                                  </div>
                              </div>
                        </div>
                    </div>
                  </div>
                  </SwiperSlide>
              </Swiper>}
              
              {caseIndex==2&&
              <Swiper
                spaceBetween={50}
                slidesPerView={1}
                navigation
                pagination={{ clickable: true }}
                scrollbar={{ draggable: true }}
                onSwiper={(swiper) => {
                  window.nowSwiper = swiper;
                }}
                onSlideChange={(swiper) => {
                    this.changeChildIndex(swiper.activeIndex+1)
                }}
              >
                <SwiperSlide>
                  <div className="over_d_box">
                    <div className="re_box">
                        <div className="d_con">
                              <div className="d_texts">
                                  <div className="p_text">
                                      您可根据需求调整每日转账限额，掌握日常理财。
                                  </div>
                                  <div className="d_text_item">
                                      <div className={`step_icon blue_bg_color${caseIndex}`}>STEP.1</div>
                                      <div className="step-text">登录汇丰中国手机银行后，点击右下角</div>
                                  </div>
                                  <div className="d_text_item">
                                      <div className={`step_icon blue_bg_color${caseIndex}`}>STEP.2</div>
                                      <div className="step-text">进入需要设定的存款账户，选择每日付款和转账限额进入【限额设置】页面，依据提示设置转入、转出、在线支付每日/每次限额。</div>
                                  </div>
                              </div>

                              <div className="phoneBox">
                                  {/* <img src={`${IMG_BASE}iphoneBox.png`} className="phoneBoxBg" alt="" /> */}
                                  <div className="phoneBoxCon case2_1_bg" >
                                    <img src={`${IMG_BASE}case${this.props.caseIndex}_1_1.png`} className="phoneBoxConBg" alt="" />
                                  </div>
                              </div>
                        </div>
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                <div className="over_d_box">
                    <div className="re_box">
                        <div className="d_con">
                              <div className="d_texts">
                                  <div className="p_text">
                                  手机银行支持实时，普通，稍后，循环等四种转账方式。
                                  </div>
                                  <div className="p_text">
                                    日累计不超过5万元的人民币非同名转账，可实现免密码器实时到账。
                                  </div>
                                  <div className="p_text_title">
                                    * 温馨提示
                                  </div>
                                  <div className="p_text_con">
                                  若您需转账给未保存过的收款账户，需在新建转账页面，选择填写或拍照扫描新的收款账号、选择收款账户开户银行并填写收款人姓名。在之后的安全验证环节，您需根据提示使用安全密码器生成交易安全码并填入。
                                  </div>
                              </div>

                              <div className="phoneBox">
                                  {/* <img src={`${IMG_BASE}iphoneBox.png`} className="phoneBoxBg" alt="" /> */}
                                  <div className="phoneBoxCon case2_2_bg">
                                    <img src={`${IMG_BASE}case${this.props.caseIndex}_2_1.png`} className="phoneBoxConBg" alt="" />
                                  </div>
                              </div>
                        </div>
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div className="over_d_box">
                    <div className="re_box">
                        <div className="d_con">
                              <div className="d_texts">
                                  <div className={`p_text_color_title blue_bg_color${caseIndex}`}>
                                      跨境转账，快速到账
                                  </div>
                                  <div className="p_text">
                                  第一时间设置人脸登录/指纹登录，无需安全密码即可登录手机银行。
                                  </div>
                                  <div className="p_text">
                                  如果您使用的是带有人脸识别（Face ID）或指纹识别（Touch ID）功能的手机，可在登录手机银行时选择人脸/指纹登录。继续依据提示开启人脸/指纹登录功能，同意条款与条件。通过验证后，即设置成功。
                                  </div>
                              </div>

                              <div className="phoneBox">
                                  {/* <img src={`${IMG_BASE}iphoneBox.png`} className="phoneBoxBg" alt="" /> */}
                                  <div className="phoneBoxCon case2_3_bg">
                                    <img src={`${IMG_BASE}case${this.props.caseIndex}_3_1.png`} className="phoneBoxConBg" alt="" />
                                  </div>
                              </div>
                        </div>
                    </div>
                  </div>
                  </SwiperSlide>
              </Swiper>}



              {caseIndex==3&&
              <Swiper
                spaceBetween={50}
                slidesPerView={1}
                navigation
                pagination={{ clickable: true }}
                scrollbar={{ draggable: true }}
                onSwiper={(swiper) => {
                  window.nowSwiper = swiper;
                }}
                onSlideChange={(swiper) => {
                    this.changeChildIndex(swiper.activeIndex+1)
                }}
              >
                <SwiperSlide>
                  <div className="over_d_box">
                    <div className="re_box">
                        <div className="d_con">
                              <div className="d_texts">
                                  <div className="d_text_item">
                                      <div className={`step_icon blue_bg_color${caseIndex}`}>STEP.1</div>
                                      <div className="step-text">进入汇丰中国手机银行注册页面</div>
                                  </div>
                                  <div className="d_text_item">
                                      <div className={`step_icon blue_bg_color${caseIndex}`}>STEP.2</div>
                                      <div className="step-text">同意条款与条件。</div>
                                  </div>
                                  <div className="d_text_item">
                                      <div className={`step_icon blue_bg_color${caseIndex}`}>STEP.3</div>
                                      <div className="step-text">选择认证方式。只需电话银行服务号码或借记卡号码，即可快速注册，推荐电话银行服务号码方式认证。</div>
                                  </div>
                                  <div className="d_text_item">
                                      <div className={`step_icon blue_bg_color${caseIndex}`}>STEP.4</div>
                                      <div className="step-text">验证身份信息。若您使用电话银行号码方式认证，需要输入电话银行号码及密码。  </div>
                                  </div>
                                  <div className="d_text_item">
                                      <div className={`step_icon blue_bg_color${caseIndex}`}>STEP.5</div>
                                      <div className="step-text">设置登录信息。创建您的用户名与密码后即完成注册！ </div>
                                  </div>
                              </div>

                              <div className="phoneBox">
                                  <img src={`${IMG_BASE}iphoneBox.png`} className="phoneBoxBg" alt="" />
                                  <div className="phoneBoxCon">
                                    <img src={`${IMG_BASE}case${this.props.caseIndex}_1_1.png`} className="phoneBoxConBg" alt="" />
                                  </div>
                              </div>
                        </div>
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                <div className="over_d_box">
                    <div className="re_box">
                        <div className="d_con">
                              <div className="d_texts">
                                  <div className="d_text_item">
                                      <div className={`step_icon blue_bg_color${caseIndex}`}>STEP.1</div>
                                      <div className="step-text">在微信中搜索“汇丰中国客户服务”微信号并关注</div>
                                  </div>
                                  <div className="d_text_item">
                                      <div className={`step_icon blue_bg_color${caseIndex}`}>STEP.2</div>
                                      <div className="step-text">点击推送的“立即绑定”消息，或在对话框中输入关键词“微信绑定”，阅读并同意条款后，按提示输入个人以及银行卡信息</div>
                                  </div>
                                  <div className="d_text_item">
                                      <div className={`step_icon blue_bg_color${caseIndex}`}>STEP.3</div>
                                      <div className="step-text">输入短信验证码完成绑定，您还将收到“绑定成功”的微信确认消息</div>
                                  </div>
                              </div>

                              <div className="phoneBox">
                                  <img src={`${IMG_BASE}iphoneBox.png`} className="phoneBoxBg" alt="" />
                                  <div className="phoneBoxCon">
                                    <img src={`${IMG_BASE}case${this.props.caseIndex}_2_1.png`} className="phoneBoxConBg" alt="" />
                                  </div>
                              </div>
                        </div>
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div className="over_d_box">
                    <div className="re_box">
                        <div className="d_con">
                              <div className="d_texts">
                                  <div className="p_text">
                                  第一时间设置人脸登录/指纹登录，无需安全密码即可登录手机银行。
                                  </div>
                                  <div className="p_text">
                                  如果您使用的是带有人脸识别（Face ID）或指纹识别（Touch ID）功能的手机，可在登录手机银行时选择人脸/指纹登录。继续依据提示开启人脸/指纹登录功能，同意条款与条件。通过验证后，即设置成功。
                                  </div>
                              </div>

                              <div className="phoneBox">
                                  <img src={`${IMG_BASE}iphoneBox.png`} className="phoneBoxBg" alt="" />
                                  <div className="phoneBoxCon">
                                    <img src={`${IMG_BASE}case${this.props.caseIndex}_3_1.png`} className="phoneBoxConBg" alt="" />
                                  </div>
                              </div>
                        </div>
                    </div>
                  </div>
                  </SwiperSlide>
              </Swiper>}




              {caseIndex==4&&
              <Swiper
                spaceBetween={50}
                slidesPerView={1}
                navigation
                pagination={{ clickable: true }}
                scrollbar={{ draggable: true }}
                onSwiper={(swiper) => {
                  window.nowSwiper = swiper;
                }}
                onSlideChange={(swiper) => {
                    this.changeChildIndex(swiper.activeIndex+1)
                }}
              >
                <SwiperSlide>
                  <div className="over_d_box">
                    <div className="re_box">
                        <div className="d_con">
                              <div className="d_texts">
                                  <div className="d_text_item">
                                      <div className={`step_icon blue_bg_color${caseIndex}`}>STEP.1</div>
                                      <div className="step-text">进入汇丰中国手机银行注册页面</div>
                                  </div>
                                  <div className="d_text_item">
                                      <div className={`step_icon blue_bg_color${caseIndex}`}>STEP.2</div>
                                      <div className="step-text">同意条款与条件。</div>
                                  </div>
                                  <div className="d_text_item">
                                      <div className={`step_icon blue_bg_color${caseIndex}`}>STEP.3</div>
                                      <div className="step-text">选择认证方式。只需电话银行服务号码或借记卡号码，即可快速注册，推荐电话银行服务号码方式认证。</div>
                                  </div>
                                  <div className="d_text_item">
                                      <div className={`step_icon blue_bg_color${caseIndex}`}>STEP.4</div>
                                      <div className="step-text">验证身份信息。若您使用电话银行号码方式认证，需要输入电话银行号码及密码。  </div>
                                  </div>
                                  <div className="d_text_item">
                                      <div className={`step_icon blue_bg_color${caseIndex}`}>STEP.5</div>
                                      <div className="step-text">设置登录信息。创建您的用户名与密码后即完成注册！ </div>
                                  </div>
                              </div>

                              <div className="phoneBox">
                                  <img src={`${IMG_BASE}iphoneBox.png`} className="phoneBoxBg" alt="" />
                                  <div className="phoneBoxCon">
                                    <img src={`${IMG_BASE}case${this.props.caseIndex}_1_1.png`} className="phoneBoxConBg" alt="" />
                                  </div>
                              </div>
                        </div>
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                <div className="over_d_box">
                    <div className="re_box">
                        <div className="d_con">
                              <div className="d_texts">
                                  <div className="d_text_item">
                                      <div className={`step_icon blue_bg_color${caseIndex}`}>STEP.1</div>
                                      <div className="step-text">在微信中搜索“汇丰中国客户服务”微信号并关注</div>
                                  </div>
                                  <div className="d_text_item">
                                      <div className={`step_icon blue_bg_color${caseIndex}`}>STEP.2</div>
                                      <div className="step-text">点击推送的“立即绑定”消息，或在对话框中输入关键词“微信绑定”，阅读并同意条款后，按提示输入个人以及银行卡信息</div>
                                  </div>
                                  <div className="d_text_item">
                                      <div className={`step_icon blue_bg_color${caseIndex}`}>STEP.3</div>
                                      <div className="step-text">输入短信验证码完成绑定，您还将收到“绑定成功”的微信确认消息</div>
                                  </div>
                              </div>

                              <div className="phoneBox">
                                  <img src={`${IMG_BASE}iphoneBox.png`} className="phoneBoxBg" alt="" />
                                  <div className="phoneBoxCon">
                                    <img src={`${IMG_BASE}case${this.props.caseIndex}_2_1.png`} className="phoneBoxConBg" alt="" />
                                  </div>
                              </div>
                        </div>
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div className="over_d_box">
                    <div className="re_box">
                        <div className="d_con">
                              <div className="d_texts">
                                  <div className="p_text">
                                  第一时间设置人脸登录/指纹登录，无需安全密码即可登录手机银行。
                                  </div>
                                  <div className="p_text">
                                  如果您使用的是带有人脸识别（Face ID）或指纹识别（Touch ID）功能的手机，可在登录手机银行时选择人脸/指纹登录。继续依据提示开启人脸/指纹登录功能，同意条款与条件。通过验证后，即设置成功。
                                  </div>
                              </div>

                              <div className="phoneBox">
                                  <img src={`${IMG_BASE}iphoneBox.png`} className="phoneBoxBg" alt="" />
                                  <div className="phoneBoxCon">
                                    <img src={`${IMG_BASE}case${this.props.caseIndex}_3_1.png`} className="phoneBoxConBg" alt="" />
                                  </div>
                              </div>
                        </div>
                    </div>
                  </div>
                  </SwiperSlide>
              </Swiper>}


        </div>
    );
  };
}

export default connect(({ system, homePage }) => ({
  system: system.toJS(),
  homePage: homePage.toJS(),
}))(App);
